<template>
<el-card class="box-card">
    <el-row style="margin-bottom:10px">
        <el-col :span="24">
            <div class="card-header">
                <span>系统负载</span>
                <el-button class="button" text>详情</el-button>
            </div>
        </el-col>
    </el-row>
    <div class="demo-progress">
        <el-row>
            <el-col :span="8">
                <el-progress type="dashboard" :percentage="40" :color="colors">
                    <template #default="{ percentage }">
                        <span class="percentage-value">{{ percentage }}%</span>
                        <span class="percentage-label">磁盘使用率</span>
                    </template>

                </el-progress>
            </el-col>
            <el-col :span="8">
                <el-progress type="dashboard" :percentage="28" :color="colors">
                    <template #default="{ percentage }">
                        <span class="percentage-value">{{ percentage }}%</span>
                        <span class="percentage-label">内存消耗率</span>
                    </template>
                </el-progress>
            </el-col>
            <el-col :span="8">
                <el-progress type="dashboard" :percentage="54" :color="colors">
                    <template #default="{ percentage }">
                        <span class="percentage-value">{{ percentage }}%</span>
                        <span class="percentage-label">CPU占用率</span>
                    </template>
                </el-progress>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="日期" width="100" />
                    <el-table-column prop="avg" label="平均值" width="180" />
                    <el-table-column prop="max" label="峰值" />
                </el-table>
            </el-col>
        </el-row>
    </div>
</el-card>
</template>

<script lang="ts" setup>
import { Check } from '@element-plus/icons-vue'
const colors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]
const tableData = [
    {
        date: '2022-11-14',
        avg: '内存 25%，Cpu 20%',
        max: '内存 55%，Cpu 55%',
    },
    {
        date: '2022-11-13',
        avg: '内存 25%，Cpu 20%',
        max: '内存 55%，Cpu 55%',
    },
    {
        date: '2022-11-12',
        avg: '内存 25%，Cpu 20%',
        max: '内存 55%，Cpu 55%',
    },
    {
        date: '2022-11-11',
        avg: '内存 25%，Cpu 20%',
        max: '内存 55%，Cpu 55%',
    },
]
</script>

<style scoped>
.percentage-value {
    display: block;
    margin-top: 10px;
    font-size: 28px;
}

.percentage-label {
    display: block;
    margin-top: 10px;
    font-size: 12px;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 350px;
}

.demo-progress .el-progress--circle {
    margin-right: 15px;
}
</style>